<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PORT</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="mian" id="mianWidget">
        <div class="top-panel">
            <div id="leftWidget">
                <div class="left-panel">
                    <fieldset>
                        <legend>串口设置</legend>
                        <table>
                            <tbody>
                                <tr>
                                    <td>串口:</td>
                                    <td>
                                        <input type="text" name="portName" value="" readonly autocomplete="off">
                                        <input type="text" name="address" value="" readonly autocomplete="off">
                                    </td>
                                </tr>
                                <tr>
                                    <td>波特率:</td>
                                    <td class="position-relative">
                                        <select name="baudRate">
                                            <option value="1200">1200</option>
                                            <option value="2400">2400</option>
                                            <option value="4800">4800</option>
                                            <option value="9600">9600</option>
                                            <option value="14400">14400</option>
                                            <option value="19200">19200</option>
                                            <option value="38400">38400</option>
                                            <option value="56000">56000</option>
                                            <option value="57600">57600</option>
                                            <option value="115200">115200</option>
                                            <option value="230400">230400</option>
                                            <option value="256000">256000</option>
                                            <option value="460800">460800</option>
                                      </select>
                                        <i class="edge"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>校验位:</td>
                                    <td class="position-relative">
                                        <select name="parity">
                                            <option value="N">None</option>
                                            <option value="O">Odd</option>
                                            <option value="E">Even </option> 
                                      </select>
                                        <i class="edge"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>数据位:</td>
                                    <td class="position-relative">
                                        <select name="dataBits">
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                      </select>
                                        <i class="edge"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>停止位:</td>
                                    <td class="position-relative">
                                        <select name="stopBits">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                      </select>
                                        <i class="edge"></i>
                                    </td>
                                </tr>

								<input type="hidden" name="timeout" value="1000000000">
                            </tbody>
                        </table>
                        <div class="button-group">
                            <button style="margin-left: 65px;" event="openport">打开</button>
                            <button class="btn-danger" event="pauseport" style="margin-left: 65px;display:none ;">暂停</button>
                            <button class="btn-danger" event="closeport" style="display:none ;">关闭</button>
                            <button class="btn-warm" event="saveport">保存</button></div>
                    </fieldset>
                    <fieldset>
                        <legend>接收区设置</legend>
                        <div class="checkbox">
                            <input type="checkbox" name="showTime" id="showTime"><label for="showTime">显示接收时间</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" name="showHexadecimal" id="showHexadecimal"><label for="showHexadecimal">十六进制显示</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" name="fontColor" id="fontColor"><label for="fontColor">白底黑字显示</label>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>附加控制</legend>
                        <div class="checkbox">
                            <input type="checkbox" name="r120" id="r120"><label for="r120">接入终端电阻</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" name="booton" id="booton"><label for="booton">自动打开端口</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" name="file" id="file"><label for="file">接收转向文件</label>
                        </div>
                    </fieldset>
                </div>
                <div>
                    <div id="rightWidget">
                        <div class="center-panel">
                            <fieldset>
                                <legend>数据接收区</legend>
                                <textarea name="receivedarea"></textarea>
                            </fieldset>
                        </div>
                        <div class="right-panel">
                            <div class="tab-nav w100" style="padding: 8px;">
                                <ul class="tab-title">
                                    <li class="li-this">多条字符串发送</li>
                                </ul>
                                <div class="tab-content">
                                    <div class="show w100" id="multiple-sending">
                                        <div class="functional">
                                            <input type="checkbox" name="autoSend" id="autoSend"><label for="autoSend">自动循环发送</label>&nbsp;&nbsp; 间隔:
                                            <input type="text" name="autoInterval" value="1000" class="w50"> ms
                                        </div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>HEX</th>
                                                    <th>字符串</th>
                                                    <th>发送</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox">
                                                    </td>
                                                    <td>
                                                        <input type="text" value="ATCT">
                                                    </td>
                                                    <td>
                                                        <button>1</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox">
                                                    </td>
                                                    <td>
                                                        <input type="text" value="ATEC">
                                                    </td>
                                                    <td>
                                                        <button>2</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                       <div>
                                        <button event="addTr">+</button>
                                        <button event="subtractTr">-</button>
                                       </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-panel">
            <div class="tab-nav">
                <ul class="tab-title">
                    <li class="li-this">单条发送</li>
                    <li>多条发送</li>
                    <li>协议传输</li>
                    <li>帮助</li>
                </ul>
                <div class="tab-content">
                    <div class="single show">
                        <div class="single-left">
                            <div>
                                <input type="checkbox" name="hexadecimal" id="hexadecimal"><label for="hexadecimal" class="mr50">按十六进制发送</label>
                                <input type="checkbox" name="lineFeed" id="lineFeed"><label for="lineFeed" class="mr20">发送换行</label>
                                <input type="text" name="sendbytes" id="sendbytes" autocomplete="off" style="width: 85%;">
                            </div>
                            <div>
                                <input type="checkbox" name="additional" id="additional"><label for="additional" class="mr50">自动发送附加位</label>
                                <input type="checkbox" name="timed" id="timed"><label for="timed" class="mr20">定时发送</label> 周期输入：
                                <input type="text" name="ms" value="1000" class="w50">ms
                            </div>
                        </div>
                        <div class="single-right">
                            <button class="" event="sendbtn" disabled>发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送</button>
                            <button class="btn-danger" event="stop" style="display: none;">停止发送</button>
                            <button class="btn-warm" event="clear">清除发送</button>
                            <button class="btn-warm" event="clearData">清除数据</button>
                        </div>
                    </div>
                    <div>
                        <textarea></textarea>
                    </div>
                    <div>
                        <textarea></textarea>
                    </div>
                    <div>
                        <textarea></textarea>
                    </div>
                </div>
            </div>
            <div class="bytes">
                <span>接收：</span>
                <input type="text" readOnly="true" name="receive" value="0" autocomplete="off" class="w50 border-none">
                <span>bytes</span>
                <span class="ml50">发送：</span>
                <input type="text" readOnly="true" name="send" value="0" autocomplete="off" class="w50 border-none">
                <span>bytes</span>
                <a href="javascript:;" event="restoration" class="ml50">复位</a>
            </div>
        </div>
    </div>
</body>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/splitter/jqxcore.js"></script>
<script src="./js/splitter/jqxbuttons.js"></script>
<script src="./js/splitter/jqxsplitter.js"></script>
<script src="./js/port232.js"></script>

</html>